<!-- 
@author limin
@version 创建时间：2023年4月27日 下午4:53:36
@return
 -->
<template>
  <div>
    <el-table
      ref="table"
      :key="Math.random()"
      v-loading="columobj.loading"
      size="medium"
      :data="showPage"
      :stripe="false"
      :border="false"
      :fit="true"
      :show-header="true"
      :highlight-current-row="true"
      :row-class-name="tableRowClassName"
      row-key="id"
      :expand-row-keys="expands"
      :header-cell-style="tableStyle.headercellStyle"
      :cell-style="tableStyle.cellStyle"
      @select="checkSelect"
      @row-click="rowClick"
      @expand-change="handleExpandChange"
    >
      <!-- 选择框是否开启，selectable控制是否单行禁用 -->
      <!-- <el-table-column v-if="columobj.expand" type="expand" :selectable="columobj.selectable" width="40px"/> -->
      <el-table-column
        v-if="columobj.selection"
        type="selection"
        :selectable="columobj.selectable"
        width="50px"
      />
      <el-table-column v-if="columobj.expand" type="expand" width="40px">
        <template #default="{ row }">
          <div class="table-expand-left">
            <div v-for="expandinfo in columobj.expandData" :key="expandinfo">
              <h6 class="table-expand-title">{{ expandinfo.titleType }}</h6>
              <div>
                <el-form
                  v-for="expandheader in expandinfo.titleList"
                  :key="expandheader"
                >
                  <el-form-item
                    v-if="
                      expandheader.otherProp == undefined ||
                      (expandheader.otherProp.includes(expandheader.prop) &&
                        row[expandheader.prop] != undefined)
                    "
                    class="table-expand-form"
                  >
                    {{ expandheader.label }}:
                  </el-form-item>
                  <el-form-item
                    v-if="
                      expandheader.otherProp == undefined ||
                      (expandheader.otherProp.includes(expandheader.prop) &&
                        row[expandheader.prop] != undefined)
                    "
                    class="table-expand-form"
                  >
                    {{ objectConvert(row[expandheader.prop]) }}
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <el-table
              v-if="columobj.expandData[0].tableList"
              :data="row.columnTableDatas"
              :show-header="true"
              :row-class-name="tableRowClassName"
              :header-cell-style="tableStyle.headercellStyle"
              :cell-style="tableStyle.cellStyle"
            >
              <template
                v-for="(column, columIndex) in columobj.expandData[0].tableList"
              >
                <el-table-column
                  v-if="
                    column.propMatch == undefined ||
                    (column.propMatch != undefined &&
                      column.propMatch
                        .toString()
                        .indexOf(row.columnTableDatas[0].matchId) > -1)
                  "
                  :key="columIndex"
                  :prop="column.prop"
                  :label="column.label"
                  :width="column.width"
                  :min-width="column.minwidth"
                  :fixed="column.fixed"
                  :align="column.align || 'center'"
                  :sortable="column.sortable"
                  :index="columIndex"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <!-- 默认展示 -->
                    <span v-if="column.text">
                      {{ objectConvert(scope.row[column.prop]) }}
                    </span>
                    <span v-if="column.changetext && column.editRow != $index">
                      {{
                        changeName(
                          scope.row[column.prop],
                          column.prop,
                          column.textname
                        )
                      }}
                    </span>
                    <!-- 状态对象展示 -->
                    <span v-if="column.status">
                      <ins-status-icon
                        :status="statusIcon(scope.row[column.prop])"
                      />
                      {{
                        scope.row[column.prop] ? scope.row[column.prop] : 'N/A'
                      }}
                      <!--{{ row[column.prop].msg }}-->
                    </span>
                    <span v-if="column.onlystatus">
                      <ins-status-icon
                        :status="statusIcon(scope.row[column.prop])"
                      />
                    </span>
                    <span v-if="column.errorstatus">
                      <ins-status-icon
                        :status="errorStatusIcon(scope.row[column.prop])"
                      />
                    </span>
                    <!-- 自定义内容 -->
                    <span v-if="column.ownDefined">
                      {{ column.ownDefinedReturn(scope.row, $index) }}
                    </span>
                    <!-- switch开关 -->
                    <el-switch
                      v-if="column.switch"
                      v-model="scope.row[column.prop]"
                      :active-text="column.openText"
                      :inactive-text="column.closeText"
                      @change="switchChange(scope.row, $index, column.prop)"
                    />
                    <!-- 图片展示 -->
                    <!-- <img v-if="column.image" :src="row[column.prop]" style="height:30px" color="red"/> -->
                    <el-image
                      v-if="column.image"
                      :src="scope.row[column.prop]"
                      :style="{ height: column.image.height }"
                    />
                    <!-- 下拉框 -->
                    <el-select
                      v-if="column.select"
                      v-model="scope.row[column.prop]"
                      :style="{ width: column.select.width }"
                      :props="scope.row[column.prop]"
                      @change="
                        selectEvent(scope.row, $index, column.prop, columIndex)
                      "
                    >
                      <el-option
                        v-for="op in column.selectOptions"
                        :key="op.value"
                        :label="op.label"
                        :value="op.value"
                      >
                      </el-option>
                    </el-select>
                    <!-- 多选框 :disabled="columIndex == columobj.index ? !disabled : disabled"-->
                    <el-checkbox
                      v-if="column.checkbox"
                      v-model="scope.row[column.prop]"
                      size="large"
                      :disabled="
                        $index <= columobj.rowindex ||
                        columIndex == columobj.cellindex ||
                        columIndex == columobj.cellindexone
                      "
                      @change="
                        checkEvent(scope.row, $index, column.prop, columIndex)
                      "
                    />
                    <!-- 日期-->
                    <el-date-picker
                      v-if="column.date"
                      v-model="scope.row[column.prop]"
                      type="date"
                      format="YYYY-MM-DD"
                      :style="{ width: column.date.width }"
                      @change="changeDate(scope.row, $index, column.prop)"
                    >
                    </el-date-picker>
                    <!-- 时间-->
                    <el-date-picker
                      v-if="column.dateTime"
                      v-model="scope.row[column.prop]"
                      type="datetime"
                      value-format="YYYY-MM-DD hh:mm:ss"
                      :style="{ width: column.dateTime.width }"
                      @change="changeDateTime(scope.row, $index, column.prop)"
                    >
                    </el-date-picker>
                    <!-- 操作按钮 -->
                    <span
                      v-for="(operations, index) in column.operation"
                      v-show="column.isOperation"
                      :key="index"
                    >
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'add'
                        "
                        v-iconPrivilege="operations.iconPrivilege"
                        :title="$t('global.action.add')"
                        class="iconfont icon-add-line icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'edit'
                        "
                        v-iconPrivilege="operations.iconPrivilege"
                        :title="$t('global.action.edit')"
                        class="iconfont icon-a-edit3-line icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'delete'
                        "
                        v-iconPrivilege="operations.iconPrivilege"
                        :title="$t('global.action.delete')"
                        class="iconfont icon-delete-bin-6-line icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'save'
                        "
                        v-iconPrivilege="operations.iconPrivilege"
                        :title="$t('global.action.save')"
                        class="iconfont icon-a-texteditorsave-line icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'cancel'
                        "
                        v-iconPrivilege="operations.iconPrivilege"
                        :title="$t('global.action.cancel')"
                        class="iconfont icon-close-line1 icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <i
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'help'
                        "
                        :title="operations.label"
                        class="iconfont icon-message-2-line icon-mini-button"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                      </i>
                      <el-button
                        v-if="
                          operations.isShow(scope.row, $index) &&
                          operations.icon == 'icon'
                        "
                        v-checkPrivilege="operations.iconPrivilege"
                        :icon="operations.icon"
                        :type="operations.type"
                        :style="{
                          color: operations.color,
                          display: operations.display
                        }"
                        :disabled="operations.disabled"
                        @click="operations.buttonClick(scope.row, $index)"
                      >
                        {{ operations.label }}
                      </el-button>
                    </span>
                    <!-- star 星星图案-->
                    <span v-if="column.star">
                      <star-score :value="scope.row[column.prop]"></star-score>
                    </span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <!-- 普通列 -->
      <el-table-column
        v-for="(column, columIndex) in columobj.columnData"
        :key="columIndex"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minwidth"
        :fixed="column.fixed"
        :align="column.align || 'center'"
        :sortable="column.sortable"
        :index="columIndex"
        show-overflow-tooltip
      >
        <template #default="{ row, $index }">
          <!-- 默认展示 -->
          <span v-if="column.text && column.editRow != $index">
            {{ objectConvert(row[column.prop]) }}
          </span>
          <span v-if="column.changetext && column.editRow != $index">
            {{ changeName(row[column.prop], column.prop, column.textname) }}
          </span>
          <!-- 状态对象展示 -->
          <span v-if="column.status">
            <ins-status-icon :status="statusIcon(row[column.prop])" />
            {{ row[column.prop] ? row[column.prop] : 'N/A' }}
            <!--{{ row[column.prop].msg }}-->
          </span>
          <span v-if="column.onlystatus">
            <ins-status-icon :status="statusIcon(row[column.prop])" />
          </span>
          <span v-if="column.errorstatus">
            <ins-status-icon :status="errorStatusIcon(row[column.prop])" />
          </span>
          <!-- 自定义内容 -->
          <span v-if="column.ownDefined">
            {{ column.ownDefinedReturn(row, $index) }}
          </span>
          <!-- switch开关 -->
          <el-switch
            v-if="column.switch"
            v-model="row[column.prop]"
            :active-text="column.openText"
            :inactive-text="column.closeText"
            @change="switchChange(row, $index, column.prop)"
          />
          <!-- 图片展示 -->
          <!-- <img v-if="column.image" :src="row[column.prop]" style="height:30px" color="red"/> -->
          <el-image
            v-if="column.image"
            :src="row[column.prop]"
            :style="{ height: column.image.height }"
          />
          <!-- 下拉框 -->
          <el-select
            v-if="column.select"
            v-model="row[column.prop]"
            :style="{ width: column.select.width }"
            :props="row[column.prop]"
            @change="selectEvent(row, $index, column.prop, columIndex)"
          >
            <el-option
              v-for="op in column.selectOptions"
              :key="op.value"
              :label="op.label"
              :value="op.value"
            >
            </el-option>
          </el-select>
          <!-- 多选框 :disabled="columIndex == columobj.index ? !disabled : disabled"-->
          <el-checkbox
            v-if="column.checkbox"
            v-model="row[column.prop]"
            size="large"
            :disabled="
              $index <= columobj.rowindex ||
              columIndex == columobj.cellindex ||
              columIndex == columobj.cellindexone
            "
            @change="checkEvent(row, $index, column.prop, columIndex)"
          />
          <!-- 可编辑input，仅在text默认展示类型才可编辑-->
          <el-input
            v-if="column.editRow == $index"
            v-model="row[column.prop]"
            v-focus
            @blur="editInputBlur(row, $index, column.prop, columIndex)"
          />
          <!-- 日期-->
          <el-date-picker
            v-if="column.date"
            v-model="row[column.prop]"
            type="date"
            format="YYYY-MM-DD"
            :style="{ width: column.date.width }"
            @change="changeDate(row, $index, column.prop)"
          >
          </el-date-picker>
          <!-- 时间-->
          <el-date-picker
            v-if="column.dateTime"
            v-model="row[column.prop]"
            type="datetime"
            value-format="YYYY-MM-DD hh:mm:ss"
            :style="{ width: column.dateTime.width }"
            @change="changeDateTime(row, $index, column.prop)"
          >
          </el-date-picker>
          <!-- 操作按钮 -->
          <span
            v-for="(operations, index) in column.operation"
            v-show="column.isOperation"
            :key="index"
          >
            <i
              v-if="operations.isShow(row, $index) && operations.icon == 'add'"
              v-iconPrivilege="operations.iconPrivilege"
              :title="$t('global.action.add')"
              class="iconfont icon-add-line icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <i
              v-if="operations.isShow(row, $index) && operations.icon == 'edit'"
              v-iconPrivilege="operations.iconPrivilege"
              :title="$t('global.action.edit')"
              class="iconfont icon-a-edit3-line icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <i
              v-if="
                operations.isShow(row, $index) && operations.icon == 'delete'
              "
              v-iconPrivilege="operations.iconPrivilege"
              :title="$t('global.action.delete')"
              class="iconfont icon-delete-bin-6-line icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <i
              v-if="operations.isShow(row, $index) && operations.icon == 'save'"
              v-iconPrivilege="operations.iconPrivilege"
              :title="$t('global.action.save')"
              class="iconfont icon-a-texteditorsave-line icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <i
              v-if="
                operations.isShow(row, $index) && operations.icon == 'cancel'
              "
              v-iconPrivilege="operations.iconPrivilege"
              :title="$t('global.action.cancel')"
              class="iconfont icon-close-line1 icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <i
              v-if="operations.isShow(row, $index) && operations.icon == 'help'"
              :title="operations.label"
              class="iconfont icon-message-2-line icon-mini-button"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
            </i>
            <el-button
              v-if="operations.isShow(row, $index) && operations.icon == 'icon'"
              v-checkPrivilege="operations.iconPrivilege"
              :icon="operations.icon"
              :type="operations.type"
              :style="{ color: operations.color, display: operations.display }"
              :disabled="operations.disabled"
              @click="operations.buttonClick(row, $index)"
            >
              {{ operations.label }}
            </el-button>
          </span>
          <!-- star 星星图案-->
          <span v-if="column.star">
            <star-score :value="row[column.prop]"></star-score>
          </span>
        </template>
      </el-table-column>
      <template #empty>
        <img class="empty" :src="noDataImg" />
        <span class="el-tree__empty-text">
          {{ $t('global.action.no_data') }}
        </span>
      </template>
    </el-table>
    <!-- 分页 -->
    <div
      class="page_div"
      :style="{
        textAlign: pageobj.position || 'center',
        display: tabledata.length > 0 ? pageobj.display || '' : 'none'
      }"
    >
      <div class="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
          :hide-on-single-page="hideType"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import InsStatusIcon from '@/components/Global/StatusIcon';
import tableStyle from '@/utilities/hooks/changeTableStyle.js';
import StarScore from './StarScore.vue';

export default {
  components: {
    InsStatusIcon,
    StarScore
  },
  directives: {
    // 自定义指令,用于可编辑input自动获取焦点
    focus: {
      inserted: function (e) {
        e.querySelector('input').focus();
      }
    }
  },
  props: {
    tabledata: {
      type: Array,
      required: true
    },
    columobj: {
      type: Object,
      required: true
    },
    //columobj.type(如果为""空，就不会加载多选框，或者index编号),lazy(是否支持懒加载)
    //columnData.columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
    //prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
    //如果为操作列,则需要填写需要的操作按钮,类型为Object。type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色),buttonClick为点击后调用的方法名称
    pageobj: {
      type: Object,
      required: true
    },
    currentpage: {
      type: Number,
      default: 1
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    hideType: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    'switchChange',
    'rowClick',
    'editInputBlur',
    'editSelectBlur',
    'rowExpandChange',
    'pagnationChange',
    'checkEvent',
    'changeDate',
    'changeDateTime',
    'checkSelect'
  ],
  data() {
    return {
      total: 1,
      pageSize: 10,
      currentPage: 1,
      showPage: [], //当前表格展示数据
      allPages: [], //所有表格数据
      wholeTable: [],
      // 获取row的key值
      getRowKeys(row) {
        return row.id;
      },
      // 要展开的行，数值的元素是row的key值
      expands: [],
      tableStyle: tableStyle(),
      isExpandParam: false,
      isPagnationParam: false,
      STATUS: ['OK', 'Warning', 'Critical'],
      selection: {},
      presentPage: 1, //当前点击页
      presentPageSize: 10, //当前点击显示总条数
      noDataImg:
        window.name == '1'
          ? require('../../assets/images/ins-nodata-oem.jpg')
          : require('../../assets/images/ins-nodata.jpg')
    };
  },
  watch: {
    tabledata: {
      handler() {
        this.renderTableData();
      }
    }
  },
  methods: {
    sortStatus(a, b, key) {
      return this.STATUS.indexOf(a[key]) - this.STATUS.indexOf(b[key]);
    },
    statusIcon(val) {
      if (val == 'Enabled' || val == 'OK' || val == 'Info' || val == 'Pass') {
        return 'success';
      } else if (val == 'Disabled' || val == "Fail") {
        return 'fail';
      } else if (val == 'Absent') {
        return 'absent';
      } else if (val == 'Warning') {
        return 'warn';
      } else if (val == 'Critical') {
        return 'danger';
      }
    },
    errorStatusIcon(val) {
      if (val == 'Enabled') {
        return 'error';
      } else if (val == 'Disabled') {
        return 'fail';
      }
    },
    renderTableData() {
      this.selection = {}; //选中清空
      this.pageSize = this.presentPageSize; //渲染数据时保留加载上次点击页数
      this.currentPage = this.presentPage; //渲染数据时保留加载上次点击页
      if (this.pageobj.pageSize != undefined) {
        this.pageSize = this.pageobj.pageSize;
      }
      this.total = this.tabledata.length;
      this.wholeTable = [];
      this.wholeTable = this.cloneObj(this.tabledata); //编写时不希望组件内加一些编辑操作就会影响父页面数据；没有这个顾虑的话也可直接赋值
      this.allPages = [];
      for (let i = 0; i < this.wholeTable.length; i += this.pageSize) {
        this.allPages.push(this.wholeTable.slice(i, i + this.pageSize));
      }
      if (this.allPages.length > 0) {
        this.showPage = this.allPages[0];
      } else {
        this.showPage = [];
      }
      this.paginations(); //调用分页
    },
    // switchChange调用
    switchChange(row, $index, prop) {
      this.$emit('switchChange', row, $index, prop);
    },
    // 帮助点击行，获取点击的下标
    tableRowClassName({ row, rowIndex }) {
      row.rowIndex = rowIndex;
      let name = '';
      if (rowIndex % 2 == 1) {
        //奇数行，序号不能被2整除
        name = 'table-even-row';
      } else {
        name = 'table-odd-row';
      }
      if (row.id != undefined && row.id == this.selection.id) {
        name += ' table-current-row';
      }
      if (row.noExpand && row.noExpand != undefined) {
        name += ' no-expanded';
      }
      return name;
    },
    // 点击多选框
    checkSelect(selection, row, column, event) {
      this.selection = selection;
      //this.$emit('checkSelect', selection, row, event);
      this.$refs.table.clearSelection();
      if (
        selection.length == 0 &&
        (row.rowClickNum == undefined || row.rowClickNum == 0)
      ) {
        this.rowClick(selection, column, event);
        return;
      }
      this.$refs.table.toggleRowSelection(row, true);
      //点击多选框事件
      if (row.rowClickNum == undefined || row.rowClickNum == 0) {
        this.rowClick(row, column, event);
      }
      row.rowClickNum = 0;
    },
    // 点击行
    rowClick(row, column, event) {
      row.rowClickNum = 1;
      this.checkSelect(row, row, column, event);
      this.$emit('rowClick', row, column, event);
    },
    //点击expand展开隐藏
    handleExpandChange(row, rows) {
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id);
      } else {
        this.expands.push(row.id);
      }
      // 假设每行数据中有一个id属性
      const isExpend = rows.some((r) => r.id === row.id); // 判断当前行展开状态
      //点击时滚动条重新加载 start
      if (this.isExpandParam) {
        this.isExpandParam = false;
      } else {
        this.isExpandParam = true;
      }
      //点击时滚动条重新加载 end
      this.$emit('rowExpandChange', this.isExpandParam, isExpend);
      //this.$emit('rowExpandChange', this.isExpandParam);
    },
    // 可编辑input失去焦点
    editInputBlur(row, $index, prop, columIndex) {
      this.$emit('editInputBlur', row, $index, prop, columIndex);
    },
    selectEvent(row, $index, prop, columIndex) {
      this.$emit('editSelectBlur', row, $index, prop, columIndex);
    },
    checkEvent(row, $index, prop, columIndex) {
      this.$emit('checkEvent', row, $index, prop, columIndex);
    },
    changeDate(row, $index, prop) {
      this.$emit('changeDate', row, $index, prop);
    },
    changeDateTime(row, $index, prop) {
      this.$emit('changeDateTime', row, $index, prop);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.presentPage = val; //对目前点击页进行赋值
      this.paginations();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.presentPageSize = val; //对目前点击展示页数进行赋值
      this.currentPage = 1;
      this.paginations();
    },
    paginations() {
      this.allPages = [];
      for (let i = 0; i < this.wholeTable.length; i += this.pageSize) {
        this.allPages.push(this.wholeTable.slice(i, i + this.pageSize));
      }
      if (this.allPages.length > 0) {
        this.showPage = this.allPages[this.currentPage - 1];
      }
      //切换分页时滚动条重新加载 start
      if (this.isPagnationParam) {
        this.isPagnationParam = false;
      } else {
        this.isPagnationParam = true;
      }
      //切换分页时滚动条重新加载 end
      this.$emit('pagnationChange', this.isPagnationParam);
    },
    //深度复制对象
    cloneObj(obj) {
      let newObj = {};
      if (typeof obj === 'object') {
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {
          let val = obj[key];
          newObj[key] = typeof val === 'object' ? this.cloneObj(val) : val;
        }
        return newObj;
      } else {
        return obj;
      }
    },
    //redfish规范针对获取不到的字段不返回,web端处理成'N/A'
    //redfish规范针对能获取的字段但是获取不到的数据或者获取数据不合理都处理成null,web端获取到的为[Object,Object],针对table返回[Object,Object]数据处理成'N/A'
    objectConvert(val) {
      if (typeof val == 'object' || typeof val == 'undefined') {
        return 'N/A';
      } else {
        val = String(val);
        return val.replace(/</g, '&lt;').replace(/>/g, '&gt;');
      }
    },
    //表格中内容中英文转化
    changeName(val, name, textname) {
      if (typeof val == 'object' || typeof val == 'undefined') {
        return 'N/A';
      } else {
        if (name != '' || name != 'undefined') {
          //判断转化的json文件中存在
          if (this.$t(`${textname}.${val}`).indexOf(textname) == -1) {
            return this.$t(`${textname}.${val}`);
          } else {
            return val;
          }
        } else {
          return val;
        }
      }
    }
  }
};
</script>
<style></style>
